import React from "react";
import { MyNavBar } from "../../../components";
import style from "./style.module.scss";
import { useNavigate } from "react-router-dom";
import FollowItem from "../../../components/followItem";
import { EmptyPage } from "../../../components";
import { getFollowPhysician, deleteCancelFollow } from "../../../api/my";
import { useAppSelector } from "../../../store/hooks";
import { useRequest } from "ahooks";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);
  const { data: FollowPhysician = [], run } = useRequest(async () => {
    const resp = await getFollowPhysician(userId, sessionId, 1, 5);
    return resp.result;
  });
  //取消关注
  const handleCancelFollow = async (doctorId: number) => {
    await deleteCancelFollow(userId, sessionId, doctorId);
    run();
  };

  return (
    <div>
      {FollowPhysician.length === 0 ? (
        <EmptyPage
          title="我的关注"
          desc="您还没有关注哦"
          path={-1}
        ></EmptyPage>
      ) : (
        <>
          <MyNavBar
            title={"我的关注"}
            style={{ backgroundColor: "#fff", height: "46px" }}
            onClickLeft={() => {
              navigate(-1);
            }}
          ></MyNavBar>
          <div className={style.followBox}>
            {/* 关注医师组件 */}
            {FollowPhysician &&
              FollowPhysician.map((item, ind) => {
                return (
                  <FollowItem
                    imagePic={item.imagePic}
                    name={item.name}
                    jobTitle={item.jobTitle}
                    inauguralHospital={item.inauguralHospital}
                    departmentName={item.departmentName}
                    praise={item.praise}
                    number={item.number}
                    key={ind}
                    oncClickCancel={() => {
                      handleCancelFollow(item.doctorId);
                    }}
                  ></FollowItem>
                );
              })}
          </div>
        </>
      )}
    </div>
  );
};

export default Index;
